<template>
  <div class="Home">
    <Header />
    <!-- slider -->
    <div class="banner text-center">
      <div class="loading-container">
        <div class="pulse"></div>
      </div>
      <div id="slides">
        <ul class="slides-container">
          <li>
            <img src="../assets/images/1.png" alt="" />
            <div class="container">
              <h3>全力打樁建设有限公司</h3>
              <p>
                Chuan Luck Piling & Construction Sdn Bhd has built a strong presence in the Southern Region of Peninsular Malaysia since 1980, providing service in piling & civil engineering works.
              </p>
            </div>
          </li>
          <li>
            <img src="../assets/images/2.jpg" alt="" />
            <div class="container">
              <h3>Perfect Nature</h3>
              <div class="contrast">
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry standard dummy text ever since the 1500s.
                </p>
              </div>
            </div>
          </li>
          <li>
            <img src="../assets/images/3.jpg" alt="" />
            <div class="container">
              <h3>Smart Planning</h3>
              <div class="contrast">
                <p>
                  It is a long established fact that a reader will be distracted
                  by the readable content of a page when looking at its layout.
                </p>
              </div>
            </div>
          </li>
        </ul>
        <nav class="slides-navigation">
          <a href="#" class="next">
            <i class="fa fa-chevron-right" aria-hidden="true"></i>
          </a>
          <a href="#" class="prev">
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
          </a>
        </nav>
      </div>
    </div>
    <!-- //slider -->

    <!-- main-content -->
    <div class="main-content">
      <!-- welcome -->
      <div class="welcome-top">
        <div class="container">
          <div class="col-md-6 welcome_top_left">
            <h3>WELCOME</h3>
            <h5>TO OUR ESTATE GROUP</h5>
            <p>
              Lorem Ipsum is simply dummy printing industry. It has survived
              not. It was popularised in the 1960s with the release of Letraset
              sheets containing Lorem Ipsum passages, and more recently.
            </p>
          </div>
          <div class="col-md-6 welcome_top_right">
            <h3>WE'RE OPEN</h3>
            <h5>In Sed Ut perspiciatis Street</h5>
            <div class="welcome_right_location">
              <div class="location_img">
                <img src="../assets/images/loc.jpg" alt="" />
              </div>
              <div class="location">
                <p>
                  Lorem Ipsum has been the industry's since the 1500s. It has
                  survived centuries.
                </p>
                <p class="location_text">
                  <span class="glyphicon glyphicon-map-marker"></span>795 Folsom
                  Ave, Suite 600,San Francisco, CA 94107
                </p>
                <p class="location_text">
                  <span class="glyphicon glyphicon-dashboard"></span>Mon to Sat
                  8:30am - 4:30pm, Sunday - Holiday
                </p>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <!-- /welcome -->
      <!-- properties-list -->
      <div class="properties">
        <div class="container">
          <!-- slider -->
          <div class="properties-list">
            <h2>Sold Properties</h2>
            <ul id="flexiselDemo3">
              <li>
                <div class="col-md-6 agileits">
                  <!-- Slider -->
                  <div class="Pro-img-w3ls">
                    <img
                      src="../assets/images/slide-1.jpg"
                      alt="W3layouts Agileits"
                    />
                  </div>
                  <!-- //Slider -->
                </div>
                <div class="col-md-6 pro-details-w3layouts">
                  <h3>Property Details :</h3>
                  <label></label>
                  <p class="location"><strong>Location :</strong> Alaska</p>
                  <ol class="agileits-prolist">
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Lorem Ipsum is simply dummy text.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      It is a long established fact that a reader will be
                      readable.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Contrary to popular belief, Lorem Ipsum is not simply
                      random text.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      The standard chunk of Lorem Ipsum since the 1500s is
                      reproduced.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Sed ut perspiciatis unde omnis iste.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      At vero eos et accusamus et iusto.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      On the other hand, we denounce with righteous.
                    </li>
                  </ol>
                </div>
              </li>
              <li>
                <div class="col-md-6 agileits">
                  <!-- Slider -->
                  <div class="Pro-img-w3ls">
                    <img
                      src="../assets/images/slide-2.jpg"
                      alt="W3layouts Agileits"
                    />
                  </div>
                  <!-- //Slider -->
                </div>
                <div class="col-md-6 pro-details-w3layouts">
                  <h3>Property Details :</h3>
                  <label></label>
                  <p class="location"><strong>Location :</strong> Colorado</p>
                  <ol class="agileits-prolist">
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Lorem Ipsum is simply dummy text.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      It is a long established fact that a reader will be
                      readable.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Contrary to popular belief, Lorem Ipsum is not simply
                      random text.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      The standard chunk of Lorem Ipsum since the 1500s is
                      reproduced.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Sed ut perspiciatis unde omnis iste.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      At vero eos et accusamus et iusto.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      On the other hand, we denounce with righteous.
                    </li>
                  </ol>
                </div>
              </li>
              <li>
                <div class="col-md-6 agileits">
                  <!-- Slider -->
                  <div class="Pro-img-w3ls">
                    <img
                      src="../assets/images/slide-3.jpg"
                      alt="W3layouts Agileits"
                    />
                  </div>
                  <!-- //Slider -->
                </div>
                <div class="col-md-6 pro-details-w3layouts">
                  <h3>Property Details :</h3>
                  <label></label>
                  <p class="location"><strong>Location :</strong> Georgia</p>
                  <ol class="agileits-prolist">
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Lorem Ipsum is simply dummy text.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      It is a long established fact that a reader will be
                      readable.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Contrary to popular belief, Lorem Ipsum is not simply
                      random text.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      The standard chunk of Lorem Ipsum since the 1500s is
                      reproduced.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Sed ut perspiciatis unde omnis iste.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      At vero eos et accusamus et iusto.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      On the other hand, we denounce with righteous.
                    </li>
                  </ol>
                </div>
              </li>
              <li>
                <div class="col-md-6 agileits">
                  <!-- Slider -->
                  <div class="Pro-img-w3ls">
                    <img
                      src="../assets/images/slide-4.jpg"
                      alt="W3layouts Agileits"
                    />
                  </div>
                  <!-- //Slider -->
                </div>
                <div class="col-md-6 pro-details-w3layouts">
                  <h3>Property Details :</h3>
                  <label></label>
                  <p class="location"><strong>Location :</strong> Kansas</p>
                  <ol class="agileits-prolist">
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Lorem Ipsum is simply dummy text.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      It is a long established fact that a reader will be
                      readable.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Contrary to popular belief, Lorem Ipsum is not simply
                      random text.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      The standard chunk of Lorem Ipsum since the 1500s is
                      reproduced.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      Sed ut perspiciatis unde omnis iste.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      At vero eos et accusamus et iusto.
                    </li>
                    <li>
                      <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                      On the other hand, we denounce with righteous.
                    </li>
                  </ol>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- //slider -->
      </div>
      <!-- //properties-list -->
      <!-- Features -->
      <div class="features-w3l">
        <div class="container">
          <h3>Our Features</h3>
          <div class="wthree_w3l_grids">
            <div class="col-md-6 wthree_w3l_grid">
              <div class="col-xs-3 wthree_w3l_grid-left">
                <div class="wthree_w3l_grid-left1">
                  <i class="fa fa-home" aria-hidden="true"></i>
                </div>
              </div>
              <div class="col-xs-9 wthree_w3l_grid-right">
                <h4>Mortgage</h4>
                <p>
                  Lorem Ipsum is simply dummy text of the printing and
                  typesetting industry. Lorem Ipsum has been the industry's
                  standard dummy text ever since the 1500s.
                </p>
              </div>
              <div class="clearfix"></div>
            </div>
            <div
              class="col-md-6 wthree_w3l_grid wow fadeInRight animated"
              data-wow-delay=".5s"
            >
              <div class="col-xs-3 wthree_w3l_grid-left">
                <div class="wthree_w3l_grid-left1">
                  <i class="fa fa-key" aria-hidden="true"></i>
                </div>
              </div>
              <div class="col-xs-9 wthree_w3l_grid-right">
                <h4>Rentals</h4>
                <p>
                  It is a long established fact that a reader will be distracted
                  by the readable content of a page when looking at its layout.
                  The point of using Lorem Ipsum.
                </p>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="wthree_w3l_grids">
            <div
              class="col-md-6 wthree_w3l_grid wow fadeInLeft animated"
              data-wow-delay=".5s"
            >
              <div class="col-xs-3 wthree_w3l_grid-left">
                <div class="wthree_w3l_grid-left1">
                  <i class="fa fa-building-o" aria-hidden="true"></i>
                </div>
              </div>
              <div class="col-xs-9 wthree_w3l_grid-right">
                <h4>Office spaces</h4>
                <p>
                  Contrary to popular belief, Lorem Ipsum is not simply random
                  text. It has roots in a piece of classical Latin literature
                  from 45 BC, making.
                </p>
              </div>
              <div class="clearfix"></div>
            </div>
            <div
              class="col-md-6 wthree_w3l_grid wow fadeInRight animated"
              data-wow-delay=".5s"
            >
              <div class="col-xs-3 wthree_w3l_grid-left">
                <div class="wthree_w3l_grid-left1">
                  <i class="fa fa-briefcase" aria-hidden="true"></i>
                </div>
              </div>
              <div class="col-xs-9 wthree_w3l_grid-right">
                <h4>Loans</h4>
                <p>
                  There are many variations of passages of Lorem Ipsum
                  available, but the majority have suffered alteration in some
                  form, by injected humour.
                </p>
              </div>
              <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <!-- //Features -->

      <!-- Stats -->
      <div class="stats">
        <div class="container">
          <h3>Overview</h3>
          <div class="stats-info">
            <div class="col-md-4 col-sm-4 stats-grid slideanim">
              <i class="fa fa-smile-o"></i>
              <div
                class="numscroller numscroller-big-bottom"
                data-slno="1"
                data-min="0"
                data-max="15500"
                data-delay=".5"
                data-increment="50"
              >
                15500
              </div>
              <p class="stats-info">Happy Clients</p>
            </div>
            <div class="col-md-4 col-sm-4 stats-grid slideanim">
              <i class="fa fa-tags" aria-hidden="true"></i>
              <div
                class="numscroller numscroller-big-bottom"
                data-slno="1"
                data-min="0"
                data-max="18"
                data-delay=".5"
                data-increment="5"
              >
                18
              </div>
              <p class="stats-info">Sales per month</p>
            </div>
            <div class="col-md-4 col-sm-4 stats-grid slideanim">
              <i class="fa fa-home" aria-hidden="true"></i>
              <div
                class="numscroller numscroller-big-bottom"
                data-slno="1"
                data-min="0"
                data-max="21500"
                data-delay=".5"
                data-increment="20"
              >
                21500
              </div>
              <p class="stats-info">Number of Homes</p>
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
      <!-- //Stats -->
      <!-- clients -->
      <div class="w3-our-clients">
        <div class="container">
          <h3>our clients</h3>
          <div id="owl-demo" class="owl-carousel text-center">
            <div class="item">
              <a href="#" class="client-logo"
                ><img
                  src="../assets/images/parter1.png"
                  class="img-responsive"
                  alt="partner"
              /></a>
            </div>
            <div class="item">
              <a href="#" class="client-logo"
                ><img
                  src="../assets/images/parter2.png"
                  class="img-responsive"
                  alt="partner"
              /></a>
            </div>
            <div class="item">
              <a href="#" class="client-logo"
                ><img
                  src="../assets/images/parter3.png"
                  class="img-responsive"
                  alt="partner"
              /></a>
            </div>
            <div class="item">
              <a href="#" class="client-logo"
                ><img
                  src="../assets/images/parter4.png"
                  class="img-responsive"
                  alt="partner"
              /></a>
            </div>
            <div class="item">
              <a href="#" class="client-logo"
                ><img
                  src="../assets/images/parter5.png"
                  class="img-responsive"
                  alt="partner"
              /></a>
            </div>
            <div class="item">
              <a href="#" class="client-logo"
                ><img
                  src="../assets/images/parter6.png"
                  class="img-responsive"
                  alt="partner"
              /></a>
            </div>
          </div>
        </div>
      </div>
      <!-- //clients -->
      <!-- news letter -->
      <div class="subscribe text-center">
        <div class="container">
          <h3>Get our free newsletter</h3>
          <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since the 1500s. Contrary to popular belief, Lorem Ipsum is not
            simply random text. It has roots in a piece of classical Latin
            literature.
          </p>
          <form>
            <input
              type="email"
              name="email"
              placeholder="Email Address"
              class="user"
              required=""
            />
            <input type="submit" value="Subscribe" />
          </form>
          <p class="spam">
            We never share your information or use it to spam you
          </p>
        </div>
      </div>
      <!-- //news letter -->
    </div>
    <!-- //main-content -->
    <!-- footer -->
    <Footer/>
    <!-- //footer -->
    <!-- here stars scrolling icon -->
  </div>
</template>

<script>
import { onMounted } from "vue";
import Header from "@/components/header.vue";
import Footer from "@/components/footer.vue";

require("../assets/js/owl.carousel.js");
require("../assets/js/jquery.superslides.js");

require("../assets/js/numscroller-1.0.js");
require("../assets/js/application.js");
export default {
  name: "Home",

  components: { Header, Footer},

  setup() {
    function hideURLbar() {
      window.scrollTo(0, 1);
    }
    onMounted(() => {
      addEventListener(
        "load",
        function () {
          setTimeout(hideURLbar, 0);
        },
        false
      );
      $("#owl-demo").owlCarousel({
        items: 4,
        lazyLoad: true,
        autoPlay: true,
        navigation: true,
        navigationText: true,
        pagination: false,
      });
      $().UItoTop({ easingType: "easeOutQuart" });
      $(".scroll").click(function (event) {
        event.preventDefault();
        $("html,body").animate({ scrollTop: $(this.hash).offset().top }, 1000);
      });
    });
  },
};
</script>

<style scoped>
@import "../assets/css/owl.carousel.css";
</style>
